<template>
	<!-- 店铺详细页面 -->
	<view class="shop_detail_box">
		<view class="backgroundImage">
			<u--image :showLoading="true" :src='`http://127.0.0.1:15000/eat-service/fileManager/getImageById?id=${shopForm.backgroundImage}`' width="100%" height="145px"></u--image>
		</view>
		<view class="shopDetails">
			<view class="shopDetailsWord">
				<view class="shopName">
					<u--text size="18px" lines="1" :text="shopForm.shopName"></u--text>
				</view>
				<view class="shopScore">
					<p  style="float: left;color: #D9873E;font-size: 10px;">{{shopForm.score}}分</p>
				</view>
				<view class="monthlySales">
					<p lines="1" style="float: left;font-size: 10px;">商家配送越49分钟.售出{{shopForm.amount}}.食无忧</p>
				</view>
				<view class="shopNotice">
					<u--text size="10px" color="#ACACAC" lines="1" text="公告: 化工大学可送寝室"></u--text>
				</view>
				<view class="shopCoupon">
					<view class="" style="width: 20%;">
						<u-button class="couponButton" icon="integral-fill" color="#F1CF92" iconColor="#C98C49"  type="primary" text="￥5 无门槛"></u-button>
					</view>
				</view>
				<view  style="width: 33%;float: left;" v-show="shopCouponShow">
					<p style="font-size: 14px;font-weight: bold;margin-left: 10px;margin-top:10px;" :show="shopCouponShow">暂无优惠活动</p>
				</view>
				<view style="width: 33%;float: left;" v-for="item in shopCouponShowList" :key="item.id">
					<p class="shopCoupon_p"><span style="font-size: 14px;font-weight: bold;color: white;">￥</span>{{item.couponPrice}}</p>
					<u-button @click="receiveCoupon" v-if="item.collectionId===1" class="shopCouponButton" color="#FD5735" type="primary" text="领"></u-button>
					<u-button @click="receiveCoupon" v-if="item.collectionId===2" class="shopCouponButton" color="#FD5735" type="primary" text="领"></u-button>
					<u-button @click="receiveCoupon" v-if="item.collectionId===3" class="shopCouponButton" color="#FD5735" type="primary" text="兑"></u-button>
					<!-- <u-tag size="mini" text="39减2 | 59减4 | 89减6 | 129减9 | 159减11" type="error" plain style="font-size:6px;"></u-tag> -->
					<u-popup :show="receiveCouponShow" mode="bottom" @close="closeReceiveCouponShow" :round="16" bgColor="#F5F5F5">
						<view style="height: 680px;">
							<p style="font-size: 20px;font-weight: bold;margin-top: 20px;margin-left: 150px;">红包优惠券</p>
							<p style="font-size: 16px;margin-top: 30px;font-weight: bold;margin-left: 20px;">本店独享优惠</p>
							<view class="receiveCouponDiv" v-for="item in shopCouponList">
								<view class="receiveCouponDiv_priceDiv">
									<p style="font-size: 30px;font-weight: bold;color: red;"><span style="font-size: 20px;">￥</span>{{item.couponPrice}}</p>
									<p v-if="item.redEnvelopeType===1" style="margin-top: 10px;font-weight: bold;color: #8C5636;font-size: 16px;">无门槛</p>
									<!-- <p v-if="item.collectionId===2" style="margin-top: 10px;font-weight: bold;color: #8C5636;font-size: 16px;">关注后领取</p> -->
									<p v-if="item.redEnvelopeType===2" style="margin-top: 10px;font-weight: bold;color: #8C5636;font-size: 16px;">满{{item.fullDecrementPrice}}可用</p>
								</view>
								<view class="receiveCouponDiv_message">
									<p style="font-size: 20px;font-weight: bold;">{{item.couponName}}</p>
									<p style="font-weight: bold;margin-top:20px;font-size: 14px;">兑换后{{item.updateTime | format}}到期</p>
								</view>
								<view class="receiveCouponDiv_exchange">
									<u-button  v-if="item.collectionId===1&&item.receiveStatic===0"  class="receiveCouponDiv_CouponButton" color="#FD5735" type="primary" text="领取" @click="getOneShopCoupon(item.couponPrice,item.couponName,item.id,item.collectionId,item.eatBean,item.redEnvelopeType,item.fullDecrementPrice,item.updateTime)"></u-button>
									<u-button  v-if="item.collectionId===1&&item.receiveStatic===1"  class="receiveCouponDiv_CouponButton" color="#FD5735" type="primary" text="已领取" :disabled="true"></u-button>
									<p v-if="item.collectionId===3" class="receiveCouponDiv_eatBeanNumber"><image src="../../static/eatBean.png" class="receiveCouponDiv_eatBeanImg"></image>{{item.eatBean}}吃货豆</p>
									<u-button  v-if="item.collectionId===3" class="receiveCouponDiv_exchangeCouponButton" color="#FD5735" type="primary" @click="exchangeOneShopCoupon(item.couponPrice,item.couponName,item.id,item.collectionId,item.eatBean,item.redEnvelopeType,item.fullDecrementPrice,item.updateTime)">兑换</u-button>
								</view>
							</view>
						</view>
						
					</u-popup>
				</view>
			</view>
			<view class="shopImage">
				<u-avatar :src='`http://127.0.0.1:15000/eat-service/fileManager/getImageById?id=${shopForm.shopLogo}`' shape="square" size="60" class="shopAvatarId"></u-avatar>
			</view>
		</view>
		<!-- 分段器 -->
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				 <u-subsection :list="list" :current="curNow" @change="sectionChange" bgColor="#fcfcfd"></u-subsection>
			</view>
		</view>
		<!-- 点餐页面 -->
		<commodityTakingOrder ref="commodityTakingData" :shopId='shopId' v-if="orderPage"></commodityTakingOrder>
		<!-- 评论页面 -->
		<view v-show="commentPage" style="background-color: #F6F6F6;padding-top: 1px;">
			<view class="comment_userComment" v-for="item in userCommentToShopDetails" :key="item.id">
				<!-- 用户信息 -->
				<view class="comment_userComment_head">
					<image :src='`http://localhost:15000/eat-service/fileManager/getImageById?id=` + item.userProtalAvatarId' class="img_userAvatar"></image>
					<p style="font-weight: bold;font-size: 14px;margin-left: 6px;width: 300px;float: left;">{{item.userProtalNickName}}</p>
					<p style="font-size: 13px;font-weight: bold;color:#C4C2C3;float: left;margin-top: 6px;margin-left: 6px;">{{item.createTime}}</p>
				</view>
				<!-- 用户购买的商品详情 -->
				<view class="comment_userComment_commodity" >
					<p style="font-weight: bold;font-size: 14px;width: 130px;float: left;color: #C4C2C3;" v-for="it in item.commodityName" :key="it.commodityName">{{it.commodityName}}*{{it.sum}}</p>
				</view>
				<!-- 评分 -->
				<view class="comment_userComment_score">
					<p style="font-weight: bold;font-size: 14px;color: #C4C2C3;width:50px;float:left;">满意度</p>
					<u-rate v-model="item.satisfactionScore" active-color="#FA3534" inactive-color="#b2b2b2" :disabled="true" style="margin-left: 4px;float: left;"></u-rate>
					<p style="font-weight: bold;font-size: 14px;color: #C4C2C3;width:60px;float:left;margin-left:10px ;">味道{{item.tasteScore}}星</p>
					<p style="font-weight: bold;font-size: 14px;color: #C4C2C3;width:60px;float:left;margin-left:10px ;">包装{{item.packingScore}}星</p>
				</view>
				<!-- 评论区域 -->
				<view class="comment_userComment_commentArea">
					<p style="font-weight: bold;font-size: 14px;">{{item.shopEvaluateContent}}</p>
				</view>
				<!-- 评论图片展示 -->
				<view class="comment_userComment_imgDiv">
					<image class="comment_userComment_img" src="https://cdn.uviewui.com/uview/album/4.jpg"></image>
					<image class="comment_userComment_img" src="https://cdn.uviewui.com/uview/album/4.jpg"></image>
					<image class="comment_userComment_img" src="https://cdn.uviewui.com/uview/album/4.jpg"></image>
				</view>
				<!-- 回复内容 -->
				<view class="comment_userComment_shopComment" v-show="item.childs.length != 0"  v-for="replyContent in item.childs" :key="item.id">
					<p style="margin-top: 12px;margin-left: 8px;font-weight: bold;color: #89898B;font-size: 14px;">商家回复</p>
					<p style="margin-top: 16px;color: #BDBDBD;font-size:14px;margin-left: 8px;">{{replyContent.replyContent}}</p>
					<!-- <p style="margin-top: 16px;color: #BDBDBD;font-size:14px;margin-left: 8px;"></p> -->
				</view>
			</view>
		</view>
		<!-- 商家页面 -->
		<text v-show="merchantPage">商家页面</text>
		<!-- 消息提示 -->
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	</view>
</template>

<script>
	import commodityTakingOrder from '../../components/commodity-taking-order/commodity-taking-order'
	export default {
		data() {
			return {
				// 默认商家页面隐藏
				merchantPage:false,
				// 默认评论页面隐藏
				commentPage:false,
				// 默认点餐页面展示
				orderPage: true,
				// 选项数组
				list: ['点餐', '评价', '商家'],
				// 指定初始化时激活的选项
				curNow: 0,
				// 店铺信息集合
				shopForm:{},
				// 店铺id
				shopId:'',
				// 头像图片
				avatarIdSrc:'https://cdn.uviewui.com/uview/album/1.jpg',
				// 背景图片
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				text: '店铺详细页面',

				value: 2,
				// 用户评价商家的集合
				userCommentToShopList:[],
				// 最终的用户评价商家的详细集合
				userCommentToShopDetails:[],
				//
				commodityNameList:[],
				// 查询店铺发放的优惠券结果集合
				shopCouponList:[],
				// 领取优惠券弹窗默认false
				receiveCouponShow:false,
				// 从头部获取用户id
				id:'',
				// 查询用户是否领取过优惠券结果
				judgeUserCouponList:[],
				// 优惠券提示消息默认false
				shopCouponShow:false,
				// 用户吃货豆数量查询结果
				userEatBeanList:[],
				// 商店首页展示优惠券结果
				shopCouponShowList:[],
			}
		},
		components: {
			commodityTakingOrder
		},
		onLoad: function(option){
			this.shopId = option.id
		},
		// 页面返回上级时
		onUnload: function(){
			this.$refs.commodityTakingData.emptyShopCar()
		},
		// 页面隐藏时
		onHide () {
		},
		// 手动刷新页面
		onPullDownRefresh () {
			// 初始化获取商品分类信息列表
			this.$refs.commodityTakingData.getCommodityTypeList()
		},
		// 将时间过滤出来格式化成yyyy-MM-dd格式的
		filters:{
		    format(value){
			  var date = new Date(value);
			  var tt = [date.getFullYear(), date.getMonth()+1, date.getDate()].join('-') ;
			  return tt;
			}
		},
		mounted(){
			// 初始化查询用户对商家的评论
			this.getUserCommentToShop()
			// 查询店铺信息根据id
			this.getAllShopById()
			// 查询商铺发放的优惠券
			this.getShopAllCoupon()
			// 从头部获取用户id
			this.id = uni.getStorageSync('id')
		},
		methods: {
			// 初始化查询用户对商家的评论
			getUserCommentToShop(){
				this.$myRequest({
					url:'/eat-service/evaluate/getUserCommentToShop',
					data:{
						shopId:this.shopId
					}
				}).then(res=>{
					this.userCommentToShopList = res.data.obj
					if(this.userCommentToShopList!=null)
						//查询用户购买的商品名称
						this.getUserBuyCommodityName()
				})
			},
			//查询用户购买的商品名称
			getUserBuyCommodityName(){
				this.userCommentToShopList.forEach((item)=>{
					this.$myRequest({
						url:'/eat-service/commoditySoldNote/getUserBuyCommodityName',
						data:{
							orderId: item.commodityOrderId
						}
					}).then(res=>{
						this.$set(item,"commodityName",res.data.obj.commodityEntities)
						this.userCommentToShopDetails.push(item)
					})
				})
			},
			// 点击各个选项时
			sectionChange(index) {
				this.curNow = index;
				if(this.curNow == 0 ){
					// 默认评论页面隐藏
					this.commentPage = false
					// 默认点餐页面展示
					this.orderPage = true
					// 默认商家页面隐藏
					this.merchantPage = false
				} else if(this.curNow == 1){
					// 默认评论页面隐藏
					this.commentPage = true
					// 默认点餐页面展示
					this.orderPage = false
					// 默认商家页面隐藏
					this.merchantPage = false
				} else{
					// 默认评论页面隐藏
					this.commentPage = false
					// 默认点餐页面展示
					this.orderPage = false
					// 默认商家页面隐藏
					this.merchantPage = true
				}
			},
			// 领取一张商家优惠券
			getOneShopCoupon(couponPrice,couponName,id,collectionId,eatBean,redEnvelopeType,fullDecrementPrice,updateTime){
				this.$myRequest({
					url:'/eat-service/shopCouponStatistic/getOneShopCoupon',
					data:{
						userId: this.id,
						shopId: this.shopId-0,
						couponName: couponName,
						couponPrice: couponPrice,
						shopCouponId:id,
						collectionId:collectionId,
						eatBean:eatBean,
						redEnvelopeType:redEnvelopeType,
						fullDecrementPrice:fullDecrementPrice,
						updateTime:updateTime
					},
					dataType:'json',
					method:'POST'
				}).then(res=>{
					if(res.data.flag){
						// 查询用户是否领取过优惠券
						this.judgeUserCoupon()
						uni.showToast({
							title: '领取成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
				})
			},
			// 兑换一张吃货豆优惠券
			exchangeOneShopCoupon(couponPrice,couponName,id,collectionId,eatBean,redEnvelopeType,fullDecrementPrice,updateTime){
				// 查询用户吃货豆数量是否够兑换优惠券
				this.$myRequest({
					url:'/eat-service/foodieBean/getUserEatBeanQuantity',
					data:{
						userProtalId:this.id,
					}
				}).then(res=>{
					this.userEatBeanList = res.data.obj
					if(this.userEatBeanList.foodieBeanNumber>=eatBean){
						this.$myRequest({
							url:'/eat-service/shopCouponStatistic/exchangeOneShopCoupon',
							data:{
								userId: this.id,
								shopId: this.shopId-0,
								couponName: couponName,
								couponPrice: couponPrice,
								shopCouponId:id,
								collectionId:collectionId,
								eatBean:eatBean,
								redEnvelopeType:redEnvelopeType,
								fullDecrementPrice:fullDecrementPrice,
								updateTime:updateTime
							},
							dataType:'json',
							method:'POST'
						}).then(res=>{
							if(res.data.flag){
								uni.showToast({
									title: '兑换成功',
									//将值设置为 success 或者直接不用写icon这个参数
									icon: 'success',
									//显示持续时间为 2秒
									duration: 2000
								})
							}
						})
					}else{
						uni.showToast({
							title: '吃货豆数量不足',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'warning',
							//显示持续时间为 2秒
							duration: 2000
						})
					}
				})
				
			},
			//关闭领取优惠券弹窗
			closeReceiveCouponShow(){
				this.receiveCouponShow = false
			},
			// 领取优惠券
			receiveCoupon(){
				this.receiveCouponShow = true
				// 查询用户是否领取过优惠券
				this.judgeUserCoupon()
			},
			// 查询用户是否领取过优惠券
			judgeUserCoupon(){
				this.shopCouponList.forEach((item)=>{
					this.$myRequest({
						url:'/eat-service/shopCouponStatistic/judgeUserCoupon',
						data:{
							userId:this.id,
							shopId:this.shopId,
							shopCouponId:item.id
						}
					}).then(res=>{
						this.judgeUserCouponList = res.data.obj
						if(this.judgeUserCouponList)
							this.$set(item,"receiveStatic",1)
						else
							this.$set(item,"receiveStatic",0)
					})
					
				})
				
			},
			// 查询商品发放的优惠券
			getShopAllCoupon(){
				this.$myRequest({
					url:'/eat-service/shopCouponIssued/getShopAllCoupon',
					data:{
						shopId: this.shopId
					}
				}).then(res=>{
					this.shopCouponList = res.data.obj
					var b = 0;
					for(var i =0 ;i<this.shopCouponList.length;i++){
						this.shopCouponShowList.push(this.shopCouponList[i])
						b++
						if(b==3)
							break
					}
					if(this.shopCouponList.length ===0)
						this.shopCouponShow = true
					else
						this.shopCouponShow = false
				})
				
			},
			// 跳转商品详情页面
			goCommodityDetail(){
				uni.navigateTo({
					url: '/pages/commodity/commodity-details'
				})
			},
			//查询店铺信息根据id
			getAllShopById() {
				this.$myRequest({
					url: '/eat-service/shop/shopById',
					method: 'get',
					data: {
						shopId: this.shopId,
					}
				}).then(res => {
					this.shopForm = res.data.obj
					if (this.shopForm.backgroundImage === null) {
						this.shopForm.backgroundImage = this.shopForm.shopLogo
					}
				})
			
			},
		}
	}
</script>

<style>
.u-demo-block__content{
	padding-top: 20px;
	padding-bottom: 20px;
}
.shop_detail_box{
	width: 100%;
	height: 852px;
	position: relative;
}
.shopAvatarId{
	 margin-top: 10px;
	 margin-left: 14px;
}
.shopImage{
	width: 23%;
	float: left;
	height: 160px;
}
.shopDiscount{
	 width: 84%;
	 height: 25px;
	 margin-left: 10px;
	 margin-top: 6px;
}
.couponButton{
	height: 22px;
	width: 96px;
	color:#926635;
}
.shopCouponButton{
	height: 30px;
	width: 26px;
	margin-top: 10px;
	margin-left: -3px;
	font-weight: bold;
	font-size: 20px;
	border-radius: 6px;
	float: left;
}
.shopCoupon{
	width: 94%;
	height: 25px;
	margin-left: 10px;
	margin-top: 20px;
	overflow: hidden;
}
.shopCoupon_p{
	width: 60px;
	height: 30px;
	font-size: 20px;
	font-weight: bold;
	color: white;
	background-color: #FB5D40;
	border-radius: 8%;
	text-align: center;
	margin-top: 10px;
	margin-left: 10px;
	float: left;
}
.shopNotice{
	 width: 94%;
	 height: 25px;
	 padding-top:10px;
	 margin-left: 10px;
}
.monthlySales{
	width: 84%;
	height: 25px;
	padding-top:10px;
	margin-left: 6px;
	float: left;
}
.shopScore{
	width: 30px;
	height: 25px;
	padding-top:10px;
	margin-left: 10px;
	float: left;
}
.shopName{
	width: 94%;
	height: 25px;
	padding-top:10px;
	margin-left: 10px;
}
.shopDetailsWord{
	width: 76%;
	float: left;
}
.backgroundImage{
	width: 100%;
	height: 145px;
}
.shopDetails{
	width: 94%;
	height: 160px;
	background-color: white;
	margin: 0 auto;
	position: relative;
	margin-top: -40px;
	border-radius: 10px 10px 10px 10px;
	box-shadow: #efefef 0px 0px 10px;
}
.warp {
	padding: 10px;
}

.button {
	margin-bottom: 10px;
}
.content {
	padding: 24rpx;
	text-align: center;
}
.comment{
	width: 100%;
	overflow: hidden;
	background-color: #F6F6F6;
	padding-top: 20px;
}
.comment_userComment{
	width: 380px;
	background-color: white;
	border-radius: 8px;
	margin-left: 20px;
	margin-top: 14px;
	overflow: hidden;
}
.comment_userComment_head{
	width: 350px;
	height: 40px;
	margin-top: 20px;
	margin-left: 10px;
}
.img_userAvatar{
	width: 40px;
	height: 40px;
	border-radius: 100%;
	float:left;
}
.comment_userComment_commodity{
	width: 370px;
	height: 20px;
	margin-top: 10px;
	margin-left: 10px;
}
.comment_userComment_score{
	width: 414px;
	height: 20px;
	margin-top: 16px;
	margin-left: 10px;
}
.comment_userComment_commentArea{
	margin-left: 10px;
	margin-top: 8px;
	width: 350px;
	height: 70px;
}
.comment_userComment_imgDiv{
	margin-left: 10px;
	width: 360px;
	height: 100px;
	margin-top: 8px;
}
.comment_userComment_img{
	width: 100px;
	height: 100px;
	border-radius: 8px;
	margin-right: 10px;
}
.comment_userComment_bottom{
	width: 380px;
	height: 20px;
	margin-top:10px;
	padding-bottom: 16px;
}
.comment_userComment_shopComment{
	width: 360px;
	height: 100px;
	margin-top: 10px;
	background-color: #F5F5F5;
	margin-left: 10px;
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 24px;
}
.receiveCouponDiv{
	width: 380px;
	height: 120px;
	background-color: #FFFFFF;
	margin-top: 10px;
	margin-left: 20px;
	border-radius: 14px;
	overflow: hidden;
}
.receiveCouponDiv_priceDiv{
	width: 100px;
	height: 80px;
	margin-top: 20px;
	float: left;
	text-align: center;
	
}
.receiveCouponDiv_message{
	width: 180px;
	height: 100px;
	margin-top: 26px;
	overflow: hidden;
	float: left;
}
.receiveCouponDiv_exchange{
	width: 100px;
	height: 100px;
	margin-top: 20px;
	text-align: center;
	overflow: hidden;
	float: left;
}
.receiveCouponDiv_CouponButton{
	width: 70px;
	height: 36px;
	color: white;
	border-radius: 16px;
	font-weight: bold;
	margin-top: 20px;
}
.receiveCouponDiv_exchangeCouponButton{
	width: 70px;
	height: 36px;
	color: white;
	border-radius: 16px;
	font-weight: bold;
	margin-top: 10px;
}
.receiveCouponDiv_eatBeanImg{
	width: 10px;
	height: 10px;
}
.receiveCouponDiv_eatBeanNumber{
	font-size: 14px;
	color: #B3B3B3;
	font-weight: bold;
}
</style>
